{% extends 'layout/base01.html' %}


<!--
继承模板后需要修改的地方:
1. 标题
2. 内容 --- 表单
3. 样式 ---- CSS
4. Script --- 事件
-->

<!-- 添加自己页面的内容 -->
<!-- 修改标题 -->
{% block title %}
    重置密码
{% endblock %}

<!-- 修改样式 -->
{% block css %}
    <style>
        #resetPassword {
            width: 500px;
            margin: 180px auto;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            padding: 30px;
            border-radius: 20px;
        }

        .error_msg {
            color: red;
            position: absolute;
        }
    </style>
{% endblock %}

<!-- 修改内容 -->
{% block content %}
    <div id="resetPassword">
        <h1 style="text-align: center">重置密码</h1>
        <hr>
        <form id="resetPasswordForm_Step1">
            {% csrf_token %}
            <!-- 进度条 -->
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"
                     style="width: 33%;">
                    步骤一: 验证码校验
                </div>
            </div>
            <!--表单部分：前两个字段 -->

            {% for field in form %}

                {% if field.name == 'code' %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                        <div class="clearfix">
                            <div class="col-md-6" style="padding-left: 0">
                                {{ field }}
                                <span class="error_msg"></span>
                            </div>
                            <div class="col-md-6">
                                <input id="btnSMS" type="button" class="btn btn-success" value="点击获取验证码"
                                       style="width: 200px;">
                            </div>
                        </div>

                    </div>
                {% elif field.name == 'mobile_phone' %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                        {{ field }}
                        <span class="error_msg"></span>
                    </div>
                {% endif %}
            {% endfor %}
            <input id="btnStep1" type="button" class="btn btn-primary" style="width: 120px;margin-top: 20px;"
                   value="下一步">
        </form>
        <form id="resetPasswordForm_Step2" style="display:none;">
            <!-- 进度条 -->
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"
                     style="width: 66%;">
                    步骤二: 输入新密码
                </div>
            </div>
            <!--表单部分：密码 -->
            {% for field in form %}

                {% if field.name == 'password' or field.name == 're_password' %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                        {{ field }}
                        <span class="error_msg"></span>
                    </div>
                {% endif %}
            {% endfor %}
            <input id="btnStep2" type="button" class="btn btn-primary" style="width: 120px;margin-top: 20px;"
                   value="确认修改">
        </form>
        <form id="resetPasswordForm_Step3" style="display:none;">
            <!-- 进度条 -->
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"
                     style="width: 100%;">
                    步骤三: 完成修改
                </div>
            </div>
            <!-- 提示成功 -->
            <div style="text-align: center;margin: 60px">
                <span class="glyphicon glyphicon-ok" aria-hidden="true" style="color:green;font-size:30px"></span>
                <span style="font-size:18px;font-weight: bold">密码修改成功！</span>
            </div>
        </form>
        <div style="margin-top: 20px">
            <a href="{% url 'login' %}">账号登陆？</a>
            <a href="{% url 'sms_login' %}" style="margin-left: 10px">验证码登陆？</a>
            <a href="{% url 'register' %}" style="margin-left: 10px">账号注册？</a>
        </div>
    </div>

{% endblock %}

<!-- 修改Script -->
{% block js %}
    <script>
        $(function () {
            // =========发送短信验证码==========
            $('#btnSMS').click(function () {
                //清除错误
                $('.error_msg').empty();

                //===ajax请求====
                $.ajax({
                    url: "{% url 'sms_send' %}",
                    method: 'post',
                    data: {
                        mobile_phone: $('#id_mobile_phone').val(),
                        tpl: 'reset',
                        csrfmiddlewaretoken: "{{ csrf_token }}",
                    },
                    dataType: 'json',
                    success: function (res) {
                        console.log(res);
                        if (res.status) {
                            //倒计时
                            btnSmsTimeCountDown();
                        } else {
                            //展示错误
                            $.each(res.errors, function (key, value) {
                                $('#id_' + key).next().text(value[0]);
                            });

                        }
                    }
                })
            });


            // ======= 点击第一个表单的按钮 ========
            $('#btnStep1').click(function () {
                // 清除所有的错误
                $('.error_msg').empty();
                //---ajax请求---
                $.ajax({
                    url: "{% url 'resetpassword' %}",
                    method: "post",
                    data: $('#resetPasswordForm_Step1').serialize(),
                    dataType: 'json',
                    success: function (res) {
                        //输出
                        console.log(res);
                        //判断
                        if (res.status) {
                            //resetPasswordForm_Step1 隐藏
                            $('#resetPasswordForm_Step1').css('display', 'none');
                            //resetPasswordForm_Step2 显示
                            $('#resetPasswordForm_Step2').css('display', 'block');
                        } else {
                            $.each(res.errors, function (key, value) {
                                $('#id_' + key).next().text(value[0]);
                            })
                        }
                    }
                });


            });


            // ======= 点击第二个表单的按钮 ========
            $('#btnStep2').click(function () {
                //重置所有的错误
                $('.error_msg').empty();
                //不允许password字段
                if ($('#id_password').val() === "") {
                    //展示错误
                    $('#id_password').next().text("密码不能为空！");
                } else {
                    //Ajax请求
                    $.ajax({
                        url: "{% url 'resetpassword' %}",
                        method: 'post',
                        data: {
                            mobile_phone: $('#id_mobile_phone').val(),
                            password: $('#id_password').val(),
                            re_password: $('#id_re_password').val(),
                            csrfmiddlewaretoken: "{{ csrf_token }}"
                        },
                        dataType: 'json',
                        success: function (res) {
                            console.log(res);
                            if (res.status) {
                                //resetPasswordForm_Step2 隐藏
                                $('#resetPasswordForm_Step2').css('display', 'none');
                                //resetPasswordForm_Step3 显示
                                $('#resetPasswordForm_Step3').css('display', 'block');
                            } else {
                                $.each(res.errors, function (key,value) {
                                    $('#id_'+ key).next().text(value[0]);
                                })
                            }
                        }
                    });

                }

            });
        })
        ;

        // ===============实现按钮上的倒计时==============
        function btnSmsTimeCountDown() {
            //获取倒计时按钮对象
            let btnSms = $('#btnSMS');
            //让按钮禁用
            btnSms.attr('disabled', true);
            //定义一个倒计时的时间
            let time = 59;
            // 使用JS在页面反复执行
            let timeCountDown = setInterval(function () {
                //在按钮上显示倒计时的时间
                btnSms.attr('value', time + '秒后重新获取验证码');
                // time - 1
                time -= 1;
                //判断倒计时有没有结束
                if (time < 0) {
                    // 让倒计时停止
                    clearInterval(timeCountDown);
                    //把按钮启用，并且显示正确的文本
                    btnSms.attr('disabled', false).val('点击获取验证码');
                }

            }, 1000)
        }
    </script>

{% endblock %}

